import './index.scss';
import React from 'react';
import {Button, DatePicker, Form, Input, Select} from "antd";
import {useLocation,useNavigate,useState} from "react-router-dom";
import store from "../../../store";


const MemberDetails=()=> {
    const { state: { val } } = useLocation();
    const {Option} = Select;
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const onReset = () => {
        navigate(-1)
    };
    const submit = (values) => {
        console.log(values)
        // navigate('/home/MembershipManagement')
    };

    // 编辑表单提交
    const onFinish = (values) => {
        console.log('Success:', values);
        let arr2=[...store.memberShip.memberTableList]
        let arr={
            id:values.id,
            telnumber:values.telnumber,
            relation:values.relation,
            Franchisee:values.Franchisee,
            state:values.state,
            integral:values.integral,
            ConsumptionAmount:values.ConsumptionAmount,
            MemberLabel:values.MemberLabel.split(","||"，"),
            RegistrationTime:values.RegistrationTime,
            SourceOfRegistration:values.SourceOfRegistration,
        }
        //通过id去循环找到表格数据，去替换这一整行
        arr2.forEach(
            (v,i)=>{
                if(v.id===values.id){
                    // arr2.splice(i,1,values)  编辑时标签会有问题
                    arr2.splice(i,1,arr)
                    store.memberShip.setMemberTableList(arr2)
                }
            }
        )
        // store.memberShip.setEditMemberTableList(values)
        submit(values)
    };


    // 编辑表单提交失败
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    // const onChange = (value, dateString) => {
    //     console.log('Selected Time: ', value);
    //     console.log('Formatted Selected Time: ', dateString);
    // };
    // const onOk = (value) => {
    //     console.log('onOk: ', value);
    // };

    return <>
        <Form
            name="bianji"
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 14,
            }}
            layout="horizontal"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            initialValues={val}
        >
            <Form.Item label="会员ID" name="id">
                <Input disabled={true} className={'inputBox'}/>
            </Form.Item>
            <Form.Item label="手机号" name="telnumber">
                <Input  className={'inputBox'}/>
            </Form.Item>
            <Form.Item label="是否关联小程序" name="relation">
                <Select
                    allowClear
                    style={{width: '280px'}}
                >
                    <Option value="是">是</Option>
                    <Option value="否">否</Option>
                </Select>
            </Form.Item>
            <Form.Item label="加盟商" name="Franchisee">
                <Select
                    allowClear
                    style={{width: '280px'}}
                >
                    <Option value="西湖黄龙店">西湖黄龙店</Option>
                    <Option value="西湖西溪店">西湖西溪店</Option>
                    <Option value="西湖古墩店">西湖古墩店</Option>
                    <Option value="西湖湖畔店">西湖湖畔店</Option>
                    <Option value="西湖武林店">西湖武林店</Option>
                </Select>
            </Form.Item>
            <Form.Item label="状态" name="state">
                <Select
                    allowClear
                    style={{width: '280px'}}
                >
                    <Option value="正常">正常</Option>
                    <Option value="冻结">冻结</Option>
                </Select>
            </Form.Item>
            <Form.Item label="积分" name="integral">
                <Input className={'inputBox'}/>
            </Form.Item>
            <Form.Item label="消费金额" name="ConsumptionAmount">
                <Input className={'inputBox'}/>
            </Form.Item>
            <Form.Item label="会员标签" name="MemberLabel">
                <Input className={'inputBox'}/>
            </Form.Item>
            <Form.Item label="注册时间" name="RegistrationTime">
                <Input disabled={true} className={'inputBox'}/>
            </Form.Item>
            <Form.Item label="注册来源" name="SourceOfRegistration">
                <Select
                    allowClear
                    style={{width: '280px'}}
                    >
                <Option value="全部">全部</Option>
                <Option value="小黑早教">小黑早教</Option>
                <Option value="小黑绘本">小黑绘本</Option>
                <Option value="萌萌乐卡通">萌萌乐卡通</Option>
                <Option value="萌萌儿歌">萌萌儿歌</Option>
            </Select>
            </Form.Item>
            <Form.Item className={'buttonStyle'}>
                <Button className={'buttonBox'} htmlType="submit" onClick={submit}>
                    保存
                </Button>
                <Button htmlType="button" onClick={onReset}>
                    取消
                </Button>
            </Form.Item>
        </Form>

    </>
}

export default MemberDetails;